function create2DArray(rows) {
	var arr = [];

	for (var i=0;i<rows;i++) {
		arr[i] = [];
	}

  return arr;
}

function outOfBounds(x,y) {
	if(x < 0 || x > canvas_width) {
		return true;
	}
	if(y > canvas_height || y < 0) {
		return true;
	}
	return false;
}

function Test() {
	this.pixelWidth = 7;
	this.pixelHeight = 7;
	this.widthNum = Math.round(canvas_width / this.pixelWidth);
	this.heightNum = Math.round(canvas_height / this.pixelHeight);
	
	this.things = create2DArray(this.widthNum);
	debug.innerHTML = 'pixel size: ' + this.pixelWidth + 'x' + this.pixelHeight;
	var counter = 0;
	for(var i = 0; i < this.heightNum; i += 1) {
		for(var j = 0; j < this.widthNum; j += 1) {
			this.things[i].push(new Pixel(this.pixelWidth * j, this.pixelHeight * i, this.pixelWidth, this.pixelHeight));
			counter += 1;
		}
	}
	
	document.getElementById('objects_debug').innerHTML = counter + ' pixels <br/> ' + this.widthNum + ' ' + this.heightNum;
}

Test.prototype = {
	
	draw: function(ctx) {
		//ctx.fillStyle = '#ff0099';
		/* offscreen rendering */
		
		var buffer = document.createElement('canvas');
		buffer.width = canvas_width;
		buffer.height = canvas_height;
		var bufferContext = buffer.getContext('2d');
		bufferContext.fillStyle = '#ff0099';
		
		
		for(var i = 0; i < this.things.length; i++) {
			for(var j = 0; j < this.things[i].length; j++) {
				//this.things[i][j].draw(ctx);
				
				var pixel = this.things[i][j];
				//ctx.fillRect(pixel.x, pixel.y, pixel.width, pixel.height);
				bufferContext.fillRect(pixel.x, pixel.y, pixel.width, pixel.height);
			}
		}
		ctx.drawImage(buffer, 0, 0);
		//return buffer;
	},
	
	update: function() {
		for(var i = 0; i < this.things.length; i++) {
			for(var j = 0; j < this.things[i].length; j++) {
				
				//if(outOfBounds(this.things[i][j])) {
					//var rem = this.things[i][j];
					//var index = this.things.indexOf(rem);
					//this.things.splice(index, 1);
				//}
				//this.things[i][j].wobble();
			}
		}
	}
}

function Pixel(x, y, width, height) {
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	this.sideMove = 0;
	this.vertMove = 0;
	this.returning = false;
}



Pixel.prototype = {
	draw: function(ctx) {
		ctx.fillRect(this.x, this.y, this.width, this.height);
	},
	
	wobble: function() {
		if(this.sideMove < 10 && !this.returning) {
			this.x -= 7;
			this.sideMove += 1;
		} else if(this.sideMove > 0 && this.returning) {
			this.x += 7;
			this.sideMove -= 1;
		} else {
			this.returning = !this.returning;
		}
	}
}